<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入css和js-->
<link rel="stylesheet" th:href="@{index.css}">
<script type="text/javascript" th:src="@{index.js}"></script>
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>

<!--根据model中的key("name")取出value，并替换掉文本-->

<h1>th:text 文本替换</h1>
<h2>取出字符串</h2>
<div th:text="${name}">name是bigsai(我是离线数据)</div>
<h2>取出JavaBean对象</h2>
<table bgcolor="#ffe4c4" border="1">
    <tr>
        <td>id</td>
        <td th:text="${student.getId()}"></td>
    </tr>
    <tr>
        <td>姓名</td>
        <td th:text="${student.getStuName()}"></td>
    </tr>
    <tr>
        <td>性别</td>
        <td th:text="${student.getStuSex()}"></td>
    </tr>
</table>

<h2>List取值</h2>
<table bgcolor="#ffe4c4" border="1">
    <tr th:each="item:${studentList}">
        <td th:text="${item}"></td>
    </tr>
</table>
<h2>Map取值</h2>
<table bgcolor="#8fbc8f" border="1">
    <tr>
        <td>place:</td>
        <td th:text="${map.get('place')}"></td>
    </tr>
    <tr>
        <td>feeling:</td>
        <td th:text="${map['feeling']}"></td>
    </tr>
</table>
<h2>Map遍历</h2>
<table bgcolor="#ffe4c4" border="1">
    <tr th:each="item:${map}">
        <td th:text="${item.key}"></td>
        <td th:text="${item.value}"></td>
    </tr>
</table>

<!--th:id 替换id-->
<!--th:utext 支持html的文本替换-->
<!--th:object 替换对象-->
<h1>th:object 替换对象</h1>
<div th:object="${student}">
    <p>id: <span th:text="*{id}">赛</span>.</p>
    <p>stuName: <span th:text="*{stuName}">18</span>.</p>
    <p>stuSex: <span th:text="*{stuSex}">好好学习</span>.</p>
</div>

<!--th:value 替换值-->
<!--th:each 迭代-->
<!--th:href 替换超链接 比如当前页面链接为http://localhost:8888/thymeleaf/index，点击后会自动访问http://localhost:8888/thymeleaf/sss -->
<a th:href="@{sss}">超链接</a>
<!--th:each 迭代-->
<!--th:href 替换超链接-->
<!--th:src 替换资源-->
<h1>配置form表单请求路径</h1>
<form th:action="@{/login}" method="post">

    姓名： <input type="text" name="username"/>
    密码： <input type="password" name="password"/>
    <input type="submit" class="button" value="登录"/>
</form>
<h1>th:if 作用：条件判断，如果判断为真就显示数据或者执行相关操作。</h1>
<p th:if="${username!=null && username!=''}"> 欢迎你： <span th:text="${username}"></span></p>

<h1> th:src 作用：用来指向文件的 url</h1>
<img th:src="@{images/title.jpg}" >

</body>
</html>